<template>
	<view class="topnav">
		
		<ttBar title="常规活动" bgColor="#fed407" :color="wordsColor" :showZhanwei="true" titleAlign="left" :isShare="isShare">
			<template v-slot:leftCnt>
				<text class="iconfont icon-back lIcon" ></text>
			</template>
			<template v-slot:rightCnt>				
				<text class="iconfont icon-home rIcon"  @tap="toHome"></text>
			</template>
		</ttBar>
		<view class="content">
			<view class="imgbox">
				<image :src="cgxq.img" mode=""></image>
				
			</view>
			<view class="imgbottom">
				<view class="left">
					<text>￥{{cgxq.paymentPrice}}</text>
					<text v-if="cgxq.linePrice > 0" style="font-size: 32rpx; color:#CCCCCC;text-decoration: line-through;">￥{{cgxq.linePrice}}</text>
				</view>
				<view class="right">
					<text>距结束</text>
					<text>{{djs}}</text>
				</view>
			</view>
			<view class="xiangqing">
				<view class="huodongname">
					<text>{{cgxq.actName}}</text>
				</view>
				<view class="yibao">
					<text>已报名{{cgxq.winNum}}人</text>
					<text>{{cgxq.likeNum}}人喜欢</text>
				</view>
				<view class="classEnsure">
					<text class="title">保障</text>
					<view class="itemBox">
						<view class="ensureItem">
							<block v-if="cgxq.refundType==2">
								<text class="iconfont icon-yuanxingxuanzhong red"></text>
								<text class="red">不支持退款</text>
							</block>
							<block v-if="cgxq.refundType==1">
								<text class="iconfont icon-yuanxingxuanzhong"></text>
								<text>随时退</text>
							</block>
							
						</view>
					</view>
					
				</view>
				<view class="nav">
					<view class="title">
						<text>活动详情</text>
					</view>
					<rich-text :nodes="introduce"></rich-text>
				</view>
			</view>
		</view>
		<view class="bottombtn">
			<view class="item">
				<view class="leftBtn" @tap="shop">
					<text class="iconfont icon-shoucangdianjia"></text>				
				</view>
				<view class="">
					<text>店铺</text>
				</view>
			</view>
			<view class="item">
				<button class="rightBtn" open-type="share">
					<text class="iconfont icon-fenxiang1"></text>				
				</button>
				<view class="">
					<text>分享</text>
				</view>
			</view>
			
			<view class="shoppingBtn" @tap="buy">
				<text>立即报名</text>
			</view>
		</view>
		
		<!-- 登录的新组件 -->
		<uni-popup ref="popup" type="center" mask-click="false" @touchmove.stop.prevent="moveHandle">
			<newlogin @tap="close"></newlogin>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
				locationCity: state => state.map.locationCity
			})
		},
		data() {
			return {
				videoHeight: uni.getSystemInfoSync().screenWidth,
				titleBg: 'rgba(255,255,255,0)',
				wordsColor: '#FFFFFF',
				btnBg:'rgba(0,0,0,0.5)',
				id:0,
				cgxq:{},
				day: '',
				hour: '',
				min: '',
				sec: '',
				type:0,
				djs:"",
				introduce:'',
				isShare:0
			}
		},
		methods: {
			
			open() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.open();
				
			},
			close() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.close();
				
			},
			moveHandle(){
				return;
			},
			
			toHome(){
				this.toPage({
					url:'index'
				})
			},
			shop(){
				// uni.redirectTo({
				//     url: '../../pagesA/shopDetail/shopDetail?id=' + this.storeId
				// });
				this.toPage({
					url:'shopDetail',
					id:this.storeId
				})
			},
			
			getusualDetails(){
				this.$store
					.dispatch('usualDetails', {
						id:this.id,
					})
					.then(res => {
						console.log(res);
						this.cgxq = res.data.ActivityUsual;
						this.getshowrichtext();
												
					});
				
			},
			buy(){
				let _now = new Date();
				var _end = new Date(this.cgxq.endTime.replace(/-/g, '/'));
				var _endTime = _end.getTime() - _now.getTime();				
			 if (_endTime <= 0) {
					uni.showModal({
						title: '友情提示',
						content: '该活动已结束！',
						success: function(res) {
							if (res.confirm) {
							} else if (res.cancel) {
							}
						}
					});
				} else if (this.isLogin) {
					let cfmArr = [this.cgxq];
					uni.setStorage({
						key: 'confirmList',
						data: cfmArr,
						complete: () => {
							this.toPage({
								url: 'confirmOrder',
								cgid:1,
								cgopid:this.id
							})
						}
					})
				
				} else {
					this.open()
				}
				
				
				
				
			},
			daojishi() {
				//倒计时
				let _end = new Date(Date.parse(this.cgxq.endTime.replace(/-/g, '/'))); //活动结束时间
				var _now = new Date(); //当前时间
				var _leftTime = _end.getTime() - _now.getTime();
				if (_leftTime > 0) {
					let _day = Math.floor(_leftTime / (1000 * 60 * 60 * 24));
					let _hour = Math.floor((_leftTime / (1000 * 60 * 60)) % 24);
					let _min = Math.floor((_leftTime / (1000 * 60)) % 60);
					let _sec = Math.floor((_leftTime / 1000) % 60);
					this.day = _day > 9 ? _day : '0' + _day;
					
					this.hour = _hour > 9 ? _hour : '0' + _hour;
					
					this.min = _min > 9 ? _min : '0' + _min;
					
					this.sec = _sec > 9 ? _sec : '0' + _sec;
					this.djs = this.day+"天"+this.hour+"时"+this.min+"分"+this.sec+"秒"
					
				} else {
					this.djs = "该活动已结束"
				}
			},
			statisticsHeat(){
				this.$store
					.dispatch('statisticsHeat', {
						id:this.id,
						type:this.type
					})
					.then(res => {
						console.log(res);												
					});
			},
			
			
			getshowrichtext(){
				let richtext = this.cgxq.introduce;
				let regex = new RegExp('<img', 'gi');  
				richtext = richtext.replace(regex, `<img style="max-width:100%;height:auto"`);              
				this.introduce = richtext;
			}
			
			
				
		},
		onPageScroll(e) {
			var _this = this;
			if (e.scrollTop > this.videoHeight) {
				this.titleBg = 'rgba(255,255,255,1)';
				this.wordsColor = "#000000";
				this.btnBg="rgba(255,255,255,1)";
			} else {
				this.titleBg = 'rgba(255,255,255,0)';
				this.wordsColor = "#FFFFFF";
				this.btnBg="rgba(0,0,0,0.5)";
			}
			uni.$on("loginNext",()=>{
				
			})
		},
		onShareAppMessage(res) {
			let _href='';
			this.type = 1;
			this.statisticsHeat();
			if(this.isLogin){
				_href='pagesB/cgxiangqing/cgxiangqing?id=' + this.id+'&uid='+this.userInfo.userId + '&storeId='+ this.storeId + '&isShare=1'
			}else{
				_href='pagesB/cgxiangqing/cgxiangqing?id=' +this.id + '&storeId='+ this.storeId + '&isShare=1'
			}
			return {
				title: '发现一个不错的活动！' + this.cgxq.actName,
				path: _href,
				imageUrl:this.cgxq.img
			}
			
		},
		onShow() {
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.type = 2;
				this.getusualDetails();
				this.statisticsHeat();
				uni.stopPullDownRefresh();
			}, 1500)
		},
		onLoad(data) {
			this.isShare = data.isShare ? parseInt(data.isShare) : 0;
			this.id = data.id;
			this.storeId = data.storeId;
			this.type = 2;
			this.statisticsHeat();
			this.getusualDetails();
			
			setInterval(() => {
				this.daojishi();
			}, 1000);
			
			
			// 自动登录
			// 判断能不能获取到本地存储的'token'		
			if (uni.getStorageSync('token')) {	
				this.$store.dispatch("apiUserAutoLogin", {
					token: uni.getStorageSync('token')
				}).then(res => {
					
					setTimeout(() => {
						this.$store.dispatch("timLogin", res.data.data.imid).then(timRes => {
							setTimeout(() => {
								this.$store.dispatch("timEditInfo", {
									nick: res.data.data.nickname,
									role: 2
								})
							}, 1000)
						})
						let _data={
								userId:res.data.data.userId,
								city:parseInt(this.locationCity.adcode),
								version:'MP'
							};
						this.$store.dispatch("eidtUserInfo",_data)
					}, 500)
				}).catch(res => {
					 
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F4F4F4;
	}
	.topnav{
		position: relative;
	}
	.content{
		padding: 0;
		margin-bottom: 110rpx;
		.imgbox{
			// position: relative;
			width: 100%;
			height: 422rpx;
			image{
				width: 100%;
				height: 100%;
			}
			
		}
		.imgbottom{
			// position: absolute;
			// left: 0;
			// bottom: 0;
			width: 100%;
			height: 102rpx;
			background-color: red;
			display: flex;
			.left{
				flex: 3;
				height: 100%;
				background-color: #ff0000;
				color: #fff;
				text{
					line-height: 102rpx;
					font-size: 45rpx;
					padding-left: 30rpx;
				}
			}
			.right{
				flex:2;
				height: 100%;
				background-color: #ff9600;
			    display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 26rpx;
			}
		}
		.xiangqing{
			// padding: 0 30rpx;
			.huodongname{
				padding: 0 30rpx;
				width: 100%;
				background-color: #fff;
				height: 60rpx;
				// background-color: green;
				text{
					line-height: 60rpx;
					font-size: 30rpx;
					color: #000;
					font-weight: 900;
				}
			}
			.yibao{
				padding: 0 30rpx;
				background-color: #fff;
				height: 60rpx;
				// margin-top: 45rpx;
				margin-bottom: 13rpx;
				display: flex;
				justify-content: space-between;
				color: #000;
				font-size: 24rpx;
				text{
					line-height: 60rpx;
				}
			}
			.nav{
				padding: 0 30rpx;
				background-color: #fff;
				// margin-top: 20rpx;
			    width: 100%;
				min-height: 200rpx;
				// border: 1px solid #000;
				// border-radius: 10rpx;
				.title{
					padding-top: 20rpx;
					width: 100%;
					text-align: left;
					margin-bottom: 40rpx;
					text{
						font-size: 32rpx;
						    font-weight: bold;
						    color: #202932;
					}
				}
			
			}
				
		}
			
		
	}
	.bottombtn{
		background-color: #fff;
		width: 100%;
		height: 100rpx;
		box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		.item{
			display: flex;
			flex-direction: column;
			width: 60rpx;
			font-size: 20rpx;
			text-align: center;
			margin-right: 60rpx;
		}
			
		.leftBtn{
			height: 60rpx;
			width: 60rpx;
			// background-color: #ff9600;
			
			border-radius: 10rpx;
			text-align: center;
			text{
				font-size: 48rpx;
				line-height: 60rpx;
				color: #4e4e4e;
			}
			
		}
		.rightBtn{
			height: 60rpx;
			width: 60rpx;
			background-color: transparent;
			
			margin-left: 0;
			padding: 0;
			border-radius: 10rpx;
			text-align: center;
			line-height: 0;
			text{
				font-size: 48rpx;
				line-height: 60rpx;
				color: #4e4e4e;
			}
		}
		.shoppingBtn{
			height: 80rpx;
			width: 440rpx;
			background-color: #ff0000;
			border-radius: 40rpx;
			text-align: center;
			text{
				font-size: 30rpx;
				font-weight: 700;
				line-height: 80rpx;
				color: #fff;
			}
		}
	}
	
	
	
	.icon-gouwuche{
		font-size: 48upx;
	}
	.rIcon{
		font-size: 44upx;
		font-weight: normal;
		margin-left: 20upx;
		width: 70upx;
		height: 70upx;
		// background-color: rgba(0,0,0,0.5);
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;
		
	}
.lIcon{
		font-size: 44upx;
		font-weight: normal;
		width: 70upx;
		height: 70upx;
		// background-color: rgba(0,0,0,0.5);
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;
	}
	.classEnsure {
		background-color: #FFFFFF;
		padding: 20upx 28upx;
		margin-bottom: 13upx;
		display: flex;
		// background-color: pink;
		align-items: baseline;
	
		.title {
			font-size: 30rpx;
			color: #2c2c2c;
			margin-right: 30upx;
		}
	
		.itemBox {
			flex-grow: 1;
			display: flex;
			justify-content: flex-start;
	
			.ensureItem {
				display: flex;
				align-items: center;
				margin-right: 12upx;
	
				>text {
					font-size: 24upx;
					color: #2c2c2c;
				}
	
				.iconfont {
					font-size: 32upx;
					margin-right: 6upx;
				}
				.red{
					color: #fe305b;
					
				}
			}
		}
	}
</style>
